import { useEffect, useRef, useState } from "react";
import "./App.less";
import { Form, Button, Input, Toast } from "antd-mobile";
import RefImg from "./assets/ref.png";
import cl from "classnames";
import { init } from "./utils/leancloud-helper";

function App() {
  useEffect(() => {
    formRef.current?.setFieldsValue({
      appId: "0XxTqBqbDxa7F3tXQvLJGKsR-gzGzoHsz",
      appKey: "96avIapLREM9OBqhttD72a3g",
      serverURL: "https://0xxtqbqb.lc-cn-n1-shared.com",
    });
    window.onScan = (res) => {
      setBluetooths(res);
    };

    window.onScanOne = (res) => {
      // console.log(res);
    };
  }, []);

  const formRef = useRef();
  const [scan, setScan] = useState(false);
  const [adds, setAdds] = useState("");
  const [bluetooths, setBluetooths] = useState([]);
  const [upload, setUpload] = useState(false);

  const startScan = () => {
    setScan(!scan);
    demoApp.scan(!scan);
    if (scan) {
      setTimeout(() => {
        setScan(false);
      }, 10000);
    }
  };

  const onClickBl = ({ adds }) => {
    setAdds(adds);
  };

  const onSubmit = (value) => {
    console.log(111, adds);
    if (adds) {
      // init(value);
      demoApp.scan(true, adds);
      setUpload(!upload);
    } else {
      Toast.show({
        content: "请填写被监听的蓝牙",
      });
    }
  };

  return (
    <div className="home">
      <div className="bl-list">
        <div className="bar">
          开始扫描
          <img className={cl({ "img-active": scan })} src={RefImg} onClick={startScan} />
        </div>
        <div className="content">
          {bluetooths.map((item) => (
            <div
              className="bluetooth"
              key={item.adds}
              onClick={() => {
                onClickBl(item);
              }}
            >
              <div>{item.name}</div>
              <div>{item.adds}</div>
            </div>
          ))}
        </div>
        <div className="adds">
          <input
            type="text"
            value={adds}
            onChange={(e) => {
              setAdds(e.target.value);
            }}
            placeholder="请手填蓝牙或从上边选择"
          />
        </div>
      </div>

      <div className="server">
        <div className="bar">配置上报服务器</div>
        <div>
          <Form
            ref={formRef}
            onFinish={onSubmit}
            layout="horizontal"
            footer={
              <Button block type="submit" color="success">
                {upload ? "停止上报" : "开始上报"}
              </Button>
            }
          >
            <Form.Item name="appId" label="appId" rules={[{ required: true, message: "不能为空" }]}>
              <Input onChange={console.log} placeholder="请输入" />
            </Form.Item>
            <Form.Item name="appKey" label="appKey" rules={[{ required: true, message: "不能为空" }]}>
              <Input onChange={console.log} placeholder="请输入" />
            </Form.Item>
            <Form.Item name="serverURL" label="serverURL" rules={[{ required: true, message: "不能为空" }]}>
              <Input onChange={console.log} placeholder="请输入" />
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default App;
